<template>
	<view class="content" style="width:100%;">
		<block v-if="!user">
			<uv-empty mode="search" text="未登录 , 请先登录" :marginTop="160">
				<uv-button type="primary" text="去登录" @click="login" style="width:600rpx;margin:75rpx;"></uv-button>
			</uv-empty>
		</block>
		<block v-else>
		<uv-vtabs
			:list="list"
			:scrollable="false"
			:barScrollable="false"
			:chain="false"
			:hdHeight="250"
			style="width:100%;background:#f2f2f2;"
			:barItemActiveStyle="{fontSize:'16px',fontWeight:'bold'}"
		>
		<view>
			
		</view>
		</uv-vtabs>
		</block>
	</view>
</template>

<script>
import { getDclasses, getDatatime, getDeviceState, getDeviceStatus, getDeviceImage } from '@/utils/device';
import { dclassMap, dclassCodeMap } from '@/utils/constant';
import { routeUrl, toast, modal, loading, arraySortForStr,arraySortForMul, arraySort } from '@/utils'
import { login } from '@/api/user';
import { mapGetters } from 'vuex'
export default {
	data() {
		return {
			dclassIndex: 0,
			dclassMap,
			dclassCodeMap,
			dclasses: [],
			title: '首页',
			actions: ['1#口', '2#口'],
			current: 0,
			value: 40,
			list: [
				{
					name: '首页',
					component:'map'
				},
				{
					name: '地图'
				},
				{
					name: '列表'
				},
				{
					name: '我的'
				}
			]
		};
	},
	onLoad() {
		this.selectForCloud({ refresh: 1 });
	},
	computed: {
		...mapGetters(['user','devices', 'projects', 'project', 'token', 'name']),
		dclass(){
			const res = this.dclasses[this.dclassIndex]
			return res
		},
		dclassesTab() {
			let res = [];
			console.log(this.dclasses)
			if (this.dclasses && this.dclasses.length > 0) {
				return this.dclasses.map(item => item.dclassName);
			}
			console.log(res)
			return res;
		},
		dclassDevices() {
				let res = [];
				if (this.dclasses && this.dclasses.length > 0) {
					res = (this.dclasses[this.dclassIndex] && this.dclasses[this.dclassIndex].data) || [];
				}
				if (this.deviceName) {
					res = res.filter(val => {
						return val.map_show > 0 && (val.name.indexOf(this.deviceName) > -1 || val.serialno.indexOf(this.deviceName) > -1);
					});
				}
				if(this.vPercentMin){
					res = res.filter(val => {
						return +val.states.VPercent >= +this.vPercentMin;
					});
				}
				if(this.vPercentMax){
					res = res.filter(val => {
						return +val.states.VPercent <= +this.vPercentMax;
					});
				}
				if(this.vMin){
					res = res.filter(val => {
						return +val.states.V/1000 >= +this.vMin;
					});
				}
				if(this.vMax){
					res = res.filter(val => {
						return +val.states.V/1000 <= +this.vMax;
					});
				}
				if(this.sortValue){
					switch(+this.sortValue){
						case 1:
							res = arraySortForMul(res,'states','V','asc')
							break;
						case 2:
							res = arraySortForMul(res,'states','V','desc')
							break;
						case 3:
							res = arraySortForStr(res,'name','asc')
							break;
						case 4:
							res = arraySortForStr(res,'name','desc')
							break;
						case 5:
							res = arraySortForMul(res,'states','timestamp','asc')
							break;
						case 6:
							res = arraySortForMul(res,'states','timestamp','desc')
							break;
					}
				}
				return res;
			}
		},
	methods: {
		async selectForCloud(params = null) {
			if (this.name) {
				await this.$store
					.dispatch('device/getAll', params)
					.then(() => {
						if (params) {
							this.dclassIndex = 0;
						}
						uni.stopPullDownRefresh();
					})
					.catch(err => {
						console.log(err);
					});
			}
		},
		async login() {
			const { data } = await login({ phone: '13520946139', password: 'Dev1@3$5' });
			uni.showModal({
				content: JSON.stringify(data)
			});
			routeUrl('/pages/login');
		},
		showAction() {
			this.$refs.popup.open('bottom');
		},
		change(e) {
			console.log(e);
			this.current = e;
		}
	}
};
</script>

<style lang="scss" scoped>
.d-board {
	width: 45%;
	margin: 2% 0 0 2%;
	background: #f0f0f0;
	border-radius: 4px;
	padding: 1%;
	.l {
		width: 100rpx;
		height: 100rpx;
		margin-right: 24rpx;
		image {
			width: 100rpx;
			height: 100rpx;
		}
	}
	.r {
		width: 100%;
		&-t {
			margin-bottom: 16rpx;
			color: #999;
			&-l {
				font-size: 20px;
				color: #333;
				font-weight: bold;
			}
		}
		&-b {
			image {
				display: inline-block; /* 使容器成为行内块元素 */
				vertical-align: middle; /* 垂直居中对齐 */
				width: 36rpx;
				height: 36rpx;
				margin-right: 8rpx;
			}
			text {
				font-size: 32rpx;
				line-height: 36rpx;
				color: #666;
			}
		}
	}
}
.d-flex {
	display: flex;
}
.flex-column {
	flex-direction: column;
}
.mlauto {
	margin-left: auto;
}
</style>
